<template>
	<div class="shoucangjia">
		<div class="shoucang">
			<div class="shoucang1">
				<ul>
					<li>达人</li>
					<li>视频</li>
					<li>音乐</li>
					<li>话题</li>
				</ul>
			</div>
		</div>
		<div class="xiamian">
			<img src="../../assets/img/404.png" />
			<span>
				您还尚未收藏达人
			</span>
		</div>
	</div>
</template>

<script>
	export default{
		name:'shoucangjia',
		data(){
			return{
				
			}
		},
		mounted:function(){
			$(".shoucang1 ul li").click(function(){
				$(this).css({
					'color': '#0091FF',
					'border-bottom':'2px solid #0091FF' ,
				})
				$(this).siblings().css({
					'color': '#333',
					'border-bottom':"none",
				})
			})
		}
	}
</script>

<style scoped="scoped" lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	.shoucangjia{
		
		.shoucang{
			border-bottom:1px solid #E7E7E7 ;
			background-color: #fff;
			
			.shoucang1{
				width: 50%;
				margin: auto;
				
				ul{
					list-style: none;
					display: flex;
					justify-content: space-around;
					align-items: center;
					
					li{
						color: #333333;
						font-size: 0.5rem;
						padding: 1rem;
						cursor: pointer;
					}
					li:nth-of-type(1){
						color: #0091FF;
						border-bottom:2px solid #0091FF ;
					}
				}
			}
		}
		
		.xiamian{
			text-align: center;
			background-color: #fff;
			padding: 5rem 0;
			
			img{
				width: 8rem;
			}
			span{
				text-align: center;
				display: block;
				padding: 0.8rem 0;
				font-size: 0.4rem;
				color: #999;
			}
		}
	}
</style>
